<template>
  <div :class="['board-container-wrap', `board-${config.direction}`]"
       :data-id="config.id"
       ref="vbContainerWrap"
       :style="{width: `calc(${config.width}% - ${config.lastDirection === 'LD' ? 0 : config.space}px)`,
       height: config.isOutContainer ? `${config.height}px` : `calc(${config.height}% - ${config.lastDirection === 'LD' ? config.space : 0}px)`}">
    <component v-for="component in config.children"
               :is="component.type"
               :key="component.id"
               :config="component"
               :isPreview="isPreview"
               @deleteComponents="deleteComponents"
               @dragMousedown="dragMousedown"
               @dragMouseup="dragMouseup"
               @handleSearch="handleSearch"
               @handleReset="handleReset"
    ></component>
  </div>
</template>

<script>
import Space from './space'
import Chart from './chart'
import Container from './container'
import FilterWrap from './filterWrap'

export default {
  name: 'container',
  components: {
    Space,
    Chart,
    Container,
    FilterWrap
  },
  props: {
    config: {
      type: Object,
      default: () => ({})
    },
    percent: {
      type: Number,
      default: () => null
    },//容器百分比
    isPreview: {
      type: Boolean,
      default: () => false
    }//全屏/预览
    // themeConfig: {
    //   type: Object,
    //   default: () => ({})
    // },//全局主题配置
  },
  methods: {
    deleteComponents(configInfo) {
      this.$emit('deleteComponents', configInfo)
    },
    dragMousedown(type, configInfo) {
      this.$emit('dragMousedown', type, configInfo)
    },
    dragMouseup() {
      this.$emit('dragMouseup', this.config)
    },
    handleSearch(reset) {
      this.$emit('handleSearch', reset)
    },
    handleReset() {
      this.$emit('handleReset')
    }
  }
}
</script>

<style scoped lang="scss">
.board-container-wrap {
  display: flex;
  /*position: relative;*/
}

/* 横向 */
.board-TD {
  width: 100%;
  flex-direction: row;
}

/* 纵向 */
.board-LD {
  height: 100%;
  flex-direction: column;
}
</style>
